<template>
    <div class="home">
        <!-- 折线图 -->
        <div id="line"></div>
        <!-- 柱形图 -->
        <div id="bar"></div>
        <!-- 饼状图 -->
        <div id="pie"></div>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import * as echarts from 'echarts';
export default {
    props: [],
    data() {
        return {}
    },
    computed: {
        ...mapGetters({
            list: "cate/list"
        }),
    },
    mounted() {
        //进入页面就请求
        this.reqList();
    },
    //监听
    watch: {
        list: {
            handler() {
                this.doBar();
                this.doLine();
                this.doPie();
            }
        },
        deep: true
    },
    methods: {
        ...mapActions({
            reqList: "cate/reqList"
        }),
        //折线图绘制
        doLine() {
            var chartDom = document.getElementById('line');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                title: {
                    text: "分类-子类数量折线图",
                    left: "center",
                    top: 20,
                },
                xAxis: {
                    type: 'category',
                    data: this.list.map((item) => item.catename)
                },
                yAxis: {
                    type: 'value',
                    title: {
                        text: "玛卡巴卡"
                    }
                },
                series: [
                    {
                        data: this.list.map((item) => item.children ? item.children.length : 0),
                        type: 'line',
                        smooth: true
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //柱形图
        doBar() {
            var chartDom = document.getElementById('bar');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: "子类数量柱状图",
                    left: "center",
                    top: 20,
                },
                xAxis: {
                    type: 'category',
                    data: this.list.map((item) => item.catename)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.list.map((item) => item.children ? item.children.length : 0),
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

        },
        //饼状图
        doPie() {
            var chartDom = document.getElementById('pie');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '子类总数',
                    subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: this.list.map((item)=>{
                            return {
                                value:item.children?item.children.length:0,
                                name:item.catename
                            }
                        }),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);

        },
    }
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.home {
    overflow: hidden;
}
#line,
#bar,
#pie {
    width: 48%;
    float: left;
    height: 300px;
    margin: @margin;
    border: 1px solid #ccc;
}
</style>